<template>
  <!--操作二次确认弹窗-->
  <el-dialog
    ref="dialog"
    :title="props.title"
    :close-on-click-modal="false"
    top="25vh"
    width="916px"
    draggable
  >
    <hr class="hrClass" />
    <h2 class="confirm-info">请确认是否{{ props.title }}?</h2>

    <template #footer>
      <div class="opt-btn">
      <span class="cancel-btn" @click="handleCancel">取消</span>
      <span class="confirm-btn" @click="handleConfirm">确定</span>
    </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { PropType } from 'vue'
import { ElDialog } from 'element-plus'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  confirm: {
    type: Function as PropType<() => Promise<void>>,
    default: () => Promise.resolve()
  }
})

const dialog = ref<InstanceType<typeof ElDialog> | null>(null)

const handleConfirm = async () => {
  await props.confirm()
}

const handleCancel = () => {
  if (dialog.value) {
    dialog.value.visible = false
  }
}
</script>

<style lang="scss" scoped>
  .confirm-info {
    height: 29px;
    font-size: 22px;
    font-family: MicrosoftYaHei;
    text-align: center;
    color: #3a4653;
    margin: 70px 0;
  }

  .opt-btn {
    text-align: right;
  }

  :deep(.dialog-footer) {
    padding-top: 0 !important;
  }
</style>
